import { h, Component } from 'preact';
import s from './PartA.scss';
import classNames from 'classnames';
import SwipeableViews from 'react-swipeable-views';

const data = [{
	url: './assets/a/a4.png'
},{
	url: './assets/a/a2.png'
},{
	url: './assets/a/a3.png'
},{
	url: './assets/a/a1.png'
},{
	url: './assets/a/a5.png'
},{
	url: './assets/a/a6.png'
},{
	url: './assets/a/a7.png'
}];


class PartA extends Component {

	constructor(props){
		super(props);
		this.state = {
			index: 3,
			list: data
		};
	}

	onChange = (e) => {
		this.setState({
			index: e
		});
	}

	handletitle = (ind) => () => {
		this.setState({
			index: ind
		});
	}

	render() {
		return (
			<div>
				<SwipeableViews index={this.state.index} onChangeIndex={this.onChange} style={{padding: '0rem 5.8rem'}}>
					{
						this.state.list.map((item, index) => (
							<div className={`${s.page} ${index === this.state.index ? s.select : ''}`} >
								<img src={item.url} />
							</div>
						))
					}
				</SwipeableViews>
				<ul className={s.tags}>
					{
						this.state.list.map((item, i) => (
							<li className={
								classNames({
									op1: i === this.state.index,
									op06: i === this.state.index - 1 || i === this.state.index + 1,
									op04: i === this.state.index - 2 || i === this.state.index + 2
								})
							}/>
						))
					}
				</ul>
			</div>
		);
	}
}

export default PartA;
